<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="baobeiCloses"></div>
      <div class="rele">
          <div class="rele-titles"><img @click="baobeiCloses" src="../assets/img/tub.png" alt="">
            <span  @click="changeReport">
            <span :class="{'titleColor':report}">楼盘报备</span>
            <span :class="{'titleColor':report === false}">房源报备</span>
            </span>
          </div>
        <div v-if="report">
          <div class="report_content">
            <div class="report_content_left">
              <div>
                选择楼盘:&nbsp;
                <el-select  v-model="formData.premises" filterable placeholder="请选择" style="width: 150px;height: 27px;">
                  <el-option
                    v-for="item in louPanData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div>
                看房时间:&nbsp;
                <el-date-picker
                  v-model="formData.see_time"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"  style="width: 150px;margin-top: 4px; cursor: pointer;">
                </el-date-picker>
              </div>
              <div>
                客户人数:&nbsp;
                <select v-model="formData.people_id" placeholder="请选择"  style="width: 150px;border: 1px solid #a0a0a0;height: 25px;margin-top: 4px;">
                  <option
                    v-for="item in louBao.TpreparationPeople"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                意向户型:&nbsp;
                <select v-model="formData.huxing" placeholder="请选择"  style="width: 150px;border: 1px solid #a0a0a0;height: 27px;margin-top: 4px;">
                  <option
                    v-for="item in louBao.TpreparationHuxing"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                指定接待:&nbsp;
                <input v-model="formData.appoint_user" placeholder="请输入指定接待人" style="width: 148px;height: 27px;border: 1px solid #a0a0a0;margin-top: 4px;">
              </div>
              <div>
                是否用车:&nbsp;
                <select v-model="formData.usecar_id" placeholder="请选择" style="width: 150px;height: 27px;margin-top: 4px;">
                  <option
                    v-for="item in louBao.TpreparationUsecar"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                用车地点:&nbsp;
                <input v-model="formData.usercar_address" placeholder="请输入上车地点" style="width: 146px;height: 26px;margin-top: 4px;">
              </div>
              <div class="preview">
                <el-button  type="primary" @click="yuLan">预览报备信息</el-button>
              </div>
            </div>
            <div v-show="yulanShow" class="report_content_right">
              <div>
                楼盘名称:&nbsp
                <select v-model="formData.premises" filterable disabled placeholder="请选择" style="width: 150px;line-height: 30px;height: 27px;">
                  <option
                    v-for="item in louPanData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                客户姓名:&nbsp;<span>{{formData.tourists_name}}</span>
              </div>
              <div>
                看房时间:&nbsp;<span>{{formData.see_time}}</span>

              </div>
              <div>
                客户人数:&nbsp;<span>{{formData.people_id}}</span>
              </div>
              <div>
                意向户型:&nbsp;
                <select v-model="formData.huxing" disabled placeholder="请选择" style="width: 150px;line-height: 30px;height: 27px;">
                  <option
                    v-for="item in louBao.TpreparationHuxing"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                指定接待:&nbsp;<span>{{formData.appoint_user}}</span>

              </div>
              <div>
                联系电话:&nbsp;<span>{{formData.tourists_phone}}</span>

              </div>
              <div>
                是否用车:&nbsp;
                <select v-model="formData.usecar_id" disabled placeholder="请选择" style="width: 150px;line-height: 30px;height: 27px;">
                  <option
                    v-for="item in louBao.TpreparationUsecar"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                用车地点:&nbsp;<span>{{formData.usercar_address}}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="report_content">
            <div class="report_content_left">
              <div>
                选择楼盘:&nbsp;
                <el-select @change="getXiaoQu" v-model="formDatas.premises" filterable placeholder="请选择" style="width: 150px;margin-left: 5px;height: 27px;">
                  <el-option
                    v-for="item in louPanData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div>
                租房/售客:&nbsp;
                <select v-model="formDatas.rentorsell" filterable placeholder="请选择" style="width: 150px;line-height: 30px;height: 27px;margin-top: 5px;">
                  <option
                    v-for="item in fangBao.TpreparationRentorsell"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                选择小区:&nbsp;
                <select @change="getLouDong" v-model="formDatas.premisespartition_id" filterable placeholder="请选择"
                           style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in fenQuData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                选择楼栋:&nbsp;
                <select @change="getDanYuan" v-model="formDatas.premisesbuilding_id" filterable placeholder="请选择"
                           style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in louDongData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                选择单元:&nbsp;
                <select @change="getLouCeng" v-model="formDatas.premisesunit_id" filterable placeholder="请选择"
                           style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in danYuanData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                选择楼层:&nbsp;
                <select @change="getFangJian" v-model="formDatas.premisesfloor_id" filterable placeholder="请选择"
                           style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in louCengData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                选择房间:&nbsp;
                <select v-model="formDatas.premisesroom_id" filterable placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px; cursor: pointer;">
                  <option
                    v-for="item in fangJianData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                看房日期:&nbsp;
                <el-date-picker
                  v-model="formDatas.see_time"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间" style="width: 150px; line-height: 30px;right: -4px;">
                </el-date-picker>
              </div>
              <div>
                客户人数:&nbsp;
                <select v-model="formDatas.people_id" placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in louBao.TpreparationPeople"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>

              <div>
                指定接待:&nbsp;
                <input v-model="formDatas.appoint_user" placeholder="请输入指定接待人" style="width: 145px;margin-left: 5px;margin-top: 5px;height: 26px;">
              </div>
              <div>
                是否用车:&nbsp;
                <select v-model="formDatas.usecar_id" placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in louBao.TpreparationUsecar"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                用车地点:&nbsp;
                <input v-model="formDatas.usercar_address" placeholder="请输入上车地点" style="width: 145px;margin-left: 5px;margin-top: 5px;height: 27px;">
              </div>
              <div class="preview">
                <el-button @click="yuLanFY" type="primary">预览报备信息</el-button>
              </div>
            </div>
            <div v-show="yulanShow" class="report_content_right">
              <div>
                租房/售客:&nbsp;
                <select v-model="formDatas.rentorsell" filterable  disabled placeholder="请选择" style="width: 150px;line-height: 30px;height: 27px;">
                  <option
                    v-for="item in fangBao.TpreparationRentorsell"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                楼盘名称:&nbsp;
                <select v-model="formDatas.premises" filterable disabled placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in louPanData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                分区名称:&nbsp;
                <select v-model="formDatas.premisespartition_id" filterable  disabled placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in fenQuData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                楼栋名称:&nbsp;
                <select v-model="formDatas.premisesbuilding_id" filterable disabled placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in louDongData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                单元名称:&nbsp;
                <select v-model="formDatas.premisesunit_id" filterable disabled placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in danYuanData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                楼层名称:&nbsp;
                <select v-model="formDatas.premisesfloor_id" filterable  disabled placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in louCengData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                房间名称:&nbsp;
                <select v-model="formDatas.premisesroom_id" filterable  disabled placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in fangJianData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                客户姓名:&nbsp;<span>{{formDatas.tourists_name}}</span>
              </div>
              <div>
                看房时间:&nbsp;<span>{{formDatas.see_time}}</span>

              </div>
              <div>
                客户人数:&nbsp;<span>{{formDatas.people_id}}</span>
              </div>
              <div>
                指定接待:&nbsp;<span>{{formDatas.appoint_user}}</span>

              </div>
              <div>
                联系电话:&nbsp;<span>{{formDatas.tourists_phone}}</span>

              </div>
              <div>
                是否用车:&nbsp;
                <select v-model="formDatas.usecar_id" disabled placeholder="请选择" style="width: 150px;margin-left: 5px;margin-top: 5px;height: 27px;">
                  <option
                    v-for="item in fangBao.TpreparationUsecar"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                用车地点:&nbsp;<span>{{formDatas.usercar_address}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="rele-btn" v-show="yulanShow">
          <el-button  @click="baoBeiSubmit" type="primary">提交</el-button >
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: {
      baobeiClose: {
        type: Function
      },
      LDmodal:{
        type:Function
      }
    },

    name: 'Preparation',
    data() {
      return {
        louPanData: [],
        fenQuData: [],
        louDongData: [],
        danYuanData: [],
        louCengData: [],
        fangJianData: [],
        titleCol: true,
        report: true,
        formData: {},
        formDatas: {},
        louBao: {},
        fangBao: {},
        kehuMessage: {},
        yulanShow: false
      };
    },
    methods: {
      baoBeiSubmit() {
        let that = this;
        console.log(that.formData.see_time);
        if (that.report === true) {
          that.$http.post('/newapi/Touristspreparation/addpremises', that.formData).then(res => {

            if (res.data.status === 200) {
              that.baobeiCloses();
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }else {
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }
          }).catch(error => {
            console.log(error);
          });
        } else {
          that.$http.post('/newapi/Touristspreparation/addhouse', that.formDatas).then(res => {
            console.log(res);
            if (res.data.status === 200) {
              that.baobeiCloses();
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }else {
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }
          }).catch(error => {
            console.log(error);
          });
        }

      },
      //预览
      yuLan() {
        let that = this;
        that.formData.tourists_id = that.kehuMessage.id; // 客源ID
        that.formData.tourists_name = that.kehuMessage.name; // 客源姓名
        that.formData.tourists_phone = that.kehuMessage.phone; //客源手机号码
        that.yulanShow = true;
      },
      yuLanFY() {
        let that = this;
        that.formDatas.tourists_id = that.kehuMessage.id; // 客源ID
        that.formDatas.tourists_name = that.kehuMessage.name; // 客源姓名
        that.formDatas.tourists_phone = that.kehuMessage.phone; //客源手机号码
        that.yulanShow = true;
      },
      //切换模式
      changeReport() {
        this.report = !this.report;
        this.yulanShow = false;
        this.getInitialData();
        // //获取所有楼盘
        // this.$http.get('/index/premises/all').then(res => {
        //   this.louPanData = res.data;
        // }).catch(err => {
        //   console.log(err);
        // });
      },
      //获取客户信息
      getKHmessage() {
        let that = this;
        that.yulanShow = false;
        //报备前获取客源信息
        that.$http.get('/newapi/Touristspreparation/index', {
          params: {
            id: that.$store.state.KHid
          }
        }).then(res => {
          console.log(res.data.res);
          that.kehuMessage = res.data.res;
        }).catch(err => {
          console.log(err);
        });
        //获取所有楼盘
        that.$http.get('/index/premises/all').then(res => {
          that.louPanData = res.data;
        }).catch(err => {
          console.log(err);
        });
      },
      getInitialData() {
        let that = this;
        that.yulanShow = false;
        if (that.report === true) {
          //楼盘报备下拉
          that.$http.get('/newapi/Touristspreparation/listdata').then(res => {
            console.log(res.data);
            that.louBao = res.data;
          }).catch(error => {
            console.log(error);
          });
        } else {
          that.$http.get('/newapi/Touristspreparation/listdatahouse').then(res => {
            console.log(res.data);
            that.fangBao = res.data;
          }).catch(error => {
            console.log(error);
          });
        }

      },
      //关闭报备
      baobeiCloses() {
        this.baobeiClose();
        this.yulanShow = false;
        this.formDatas = {};
        this.formData = {};
      },
      //获取小区
      getXiaoQu() {
        let that = this;
        that.$http.get('/newapi/Premisespartition/getdong',
          {
            params: {
              premises_id: that.formDatas.premises
            }
          }).then(res => {
          that.fenQuData = res.data.res;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取楼栋
      getLouDong() {
        let that = this;
        that.$http.get('/newapi/Premisesbuilding/getdong', {
          params: {
            premisespartition_id: that.formDatas.premisespartition_id
          }
        }).then(res => {
          that.louDongData = res.data.res;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取单元
      getDanYuan() {
        let that = this;
        that.$http.get('/newapi/Premisesunit/getdanyuan', {
          params: {
            premisesbuilding_id: that.formDatas.premisesbuilding_id
          }
        }).then(res => {
          that.danYuanData = res.data.res;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取楼层
      getLouCeng() {
        let that = this;
        that.$http.get('/newapi/Premisesfloor/getlouceng', {
          params: {
            premisesunit_id: that.formDatas.premisesunit_id
          }
        }).then(res => {
          that.louCengData = res.data.res;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取房间
      getFangJian() {
        let that = this;
        that.$http.get('/newapi/Premisesroom/getfangjian', {
          params: {
            premisesfloor_id: that.formDatas.premisesfloor_id
          }
        }).then(res => {
          that.fangJianData = res.data.res;
        }).catch(error => {
          console.log(error);
        });
      }
    },
    mounted() {

    },
    beforeUpdate() {

    }

  };
</script>
<style scoped>
  .report_content {
    display: flex;
    padding-top: 65px;
    padding-left: 20px;
    font-weight:bold;
  }

  .report_content_left, .report_content_right {
    width: 50%;
  }
  .titleColor {
    background: #fff;
    color: #ed7d31;
    height: 35px;
    padding: 5px 10px;
    border-radius: 5px;
  }
  .rele-title span {
    height: 35px;
  }
  .rele textarea {
    width: 94%;
    height: 105px;
    border: none;
    font-size: .7em;

  }
  .rele-btn {
    position: relative;
    bottom: 0;
    width: 100%;
    left: 60%;
    margin-top: -30px
  }
  .rele {
    width: 45%;
    margin: 10% auto;
    height: 50%;
    background: #ffffff;
    padding-bottom: 20px;
    position: absolute;
    z-index: 10;
    border-radius: 5px;
    /*overflow-x: hidden;*/
    overflow: hidden;
    overflow-y: auto;
    left: 20%;
    border: 1px solid #d3d3d3;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .preview{
    top: 10px;
    position: relative;
    height: 20%;
    left: 180px;
    border-radius: 10px;
  }
  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }
  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    border-radius: 10px;
    cursor: pointer;

  }
  img{
    left: 85%;
  }
  .rele-titles {
    width: 49.5%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
    cursor: pointer;
  }
  select{
    cursor: pointer;
  }
  input{
    cursor: pointer;
  }
</style>
